<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-flex direction="column">
					<pure-cell title="一个基础的带预定义样式的单元格"></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 左侧图标 -->
			<pj-demo title="左侧图标">
				<pure-flex direction="column">
					<pure-cell title="单元格标题" iconName="/static/images/i_001.png"></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 描述文字 -->
			<pj-demo title="描述文字">
				<pure-flex direction="column">
					<pure-cell title="单元格标题" desc="描述文字" iconName="/static/images/i_002.png"></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 右侧图标 -->
			<pj-demo title="右侧图标">
				<pure-flex direction="column">
					<pure-cell iconName="/static/images/i_003.png" title="单元格标题" desc="描述文字" showArrow></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 旋转右侧箭头 -->
			<pj-demo title="旋转右侧箭头">
				<pure-flex direction="column">
					<pure-cell iconName="/static/images/i_004.png" title="单元格标题" desc="描述文字" showArrow rotate></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 提示文字 -->
			<pj-demo title="提示文字">
				<pure-flex direction="column">
					<pure-cell title="单元格标题" desc="描述文字" iconName="/static/images/i_005.png" tips="提示文字" showArrow></pure-cell>
					<pure-cell title="单元格标题" desc="顶部对齐" iconName="/static/images/i_006.png" tips="只是图标顶部对齐" showArrow topAlign></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 朴素样式 -->
			<pj-demo title="朴素样式">
				<pure-flex direction="column">
					<pure-cell title="单元格标题" desc="描述文字" iconName="/static/images/i_007.png" showArrow plain></pure-cell>
					<pure-cell title="单元格标题" desc="描述文字" iconName="/static/images/i_008.png" tips="提示文字" showArrow plain></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 标题行数 -->
			<pj-demo title="标题行数">
				<pure-flex direction="column">
					<pure-cell
						title="单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题"
						desc="描述文字"
						iconName="/static/images/i_009.png"
						tips="提示文字"
						showArrow
					></pure-cell>
					<pure-cell
						title="单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题单元格标题"
						desc="描述文字"
						iconName="/static/images/i_010.png"
						tips="提示文字"
						showArrow
						titleLines="2"
					></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 描述行数 -->
			<pj-demo title="描述行数">
				<pure-flex direction="column">
					<pure-cell
						title="单元格标题"
						desc="描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字"
						iconName="/static/images/i_011.png"
						tips="提示文字"
						showArrow
					></pure-cell>
				</pure-flex>
			</pj-demo>

			<!-- 提示行数 -->
			<pj-demo title="提示行数">
				<pure-flex direction="column">
					<pure-cell
						title="单元格标题"
						desc="描述文字"
						iconName="/static/images/i_012.png"
						tips="提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字提示文字"
						showArrow
					></pure-cell>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
.page {
}
</style>
